import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/ts-common',
      name: 'ts-common',
      component: () => import('../views/study/TsCommon.vue')
    },
    {
      path: '/ts-advanced',
      name: 'ts-advanced',
      component: () => import('../views/study/TsAdvanced.vue')
    },
    {
      path: '/setup-demo',
      name: 'setup-demo',
      component: () => import('../views/study/SetupDemo.vue')
    },
    {
      path: '/ref-demo',
      name: 'ref-demo',
      component: () => import('../views/study/RefDemo.vue')
    },
    {
      path: '/life-cycle',
      name: 'life-cycle',
      component: () => import('../views/study/LifeCycle.vue')
    },
    {
      path: '/computed-watch',
      name: 'computed-watch',
      component: () => import('../views/study/ComputedWatch.vue')
    },
    {
      path: '/props-emit',
      name: 'props-emit',
      component: () => import('../views/study/PropsEmit.vue')
    },
    {
      path: '/mitt-demo',
      name: 'mitt-demo',
      component: () => import('../views/study/MittDemo.vue')
    },
    {
      path: '/model-demo',
      name: 'model-demo',
      component: () => import('../views/study/ModelDemo.vue')
    },
    {
      path: '/pinia-demo',
      name: 'pinia-demo',
      component: () => import('../views/study/PiniaDemo.vue')
    },
    {
      path: '/router-demo',
      name: 'router-demo',
      redirect: '/router-demo/router-a',
      component: () => import('../views/study/RouterDemo.vue'),
      children: [
        {
          path: '/router-demo/router-a',
          name: 'router-a',
          component: () => import('@/components/study/RouterA.vue')
        },
        {
          path: '/router-demo/router-b',
          name: 'router-b',
          component: () => import('@/components/study/RouterB.vue')
        }
      ]
    },
    {
      path: '/login-demo',
      name: 'login-demo',
      component: () => import('../views/study/LoginDemo.vue')
    }
  ]
})

export default router
